<template>
  <div :class="[isPick ? 'pf-ah-cont' : '']">
    <div class="pf-tab-wrap" :style="{ display: isPick ? 'none' : 'unset' }">
      <div :class="{ 'tab item': true, 'is active': active === tab.id }" @click="setActive(tab)"
        :style="{ top: index * 40 + 'px' }" v-for="(tab, index) in tabList" :title="tab.title" :key="tab.id"> {{
          tab.title }}
      </div>
      <div class="pickup-icon yu-icon-arr-right1" @click="changePick"></div>
    </div>
    <div :style="{ display: isPick ? 'unset' : 'none' }" class=" pickup-icon yu-icon-arr-left1" @click="changePick">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Anchor',
  props: {
    tabList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: this.tabList[0] ? this.tabList[0].id : '',
      click: false,
      isPick: false,
      timer: null
    }
  },
  watch: {
    active(val) {
      this.$emit('active-change', val)
    }
  },
  methods: {
    changePick() {
      this.isPick = !this.isPick
    },
    setActive(tab) {
      this.active = tab.id
      this.click = true
      const dom = document.body.querySelector('#' + tab.id); dom && dom.scrollIntoView({ behavior: 'smooth' });
      this.timer = setTimeout(() => {
        clearTimeout(this.timer)
        this.timer = null
        this.click = false
      }, 1000)
    }
  }
}
</script>
